<template>
  <view class="business-item-box">
    <view>
      <view class="form-fee-content-content">
        <ve-form-item label="保险公司" required :prop="`business.${itemIndex}.insureCompany`">
          <remote-select
            :multiple="false"
            :type="remoteSelectData.attrs.type"
            v-model="info!.insureCompany"
            v-model:label="remoteSelectData.label"
            :params="{
              id: info!.insureCompany,
            }"
            @change="handleRemoteSelectChange"
          ></remote-select>
        </ve-form-item>
        <ve-form-item label="保险单号">
          <ve-input placeholder="请输入" v-model="info!.insureNo" :maxlength="30" />
        </ve-form-item>
        <ve-form-item label="有效期" labelPosition="top" required :prop="`business.${itemIndex}.times`">
          <ve-daterange-picker
            v-model:start="info!.beginDate"
            v-model:end="info!.endDate"
            :placeholder="['开始时间', '结束时间']"
            mode="date"
            @confirm="timeRangeConfirmFn"
          />
        </ve-form-item>
        <view class="insure-info-header">投保信息</view>

        <view>
          <view class="insure-info-box" v-for="(item, index) in info.carInsureDetail" :key="item + index">
            <view class="insure-info-title">
              <span class="insure-info-title-text">新增险种 {{ index + 1 }}</span>
              <view @click="handleInsureDelete(index)" v-if="info.carInsureDetail.length > 1">
                <ve-icon name="delete_1" color="rgba(23,22, 22, 1)" size="36" />
              </view>
            </view>

            <view class="insure-kind-type-box">
              <ve-form-item label="承保险种">
                <ve-picker-inline
                  v-model="item.insureKindType"
                  placeholder="请选择"
                  :range="sysDict.insure_business_kind_type"
                  unit="arrowRight"
                >
                </ve-picker-inline>
              </ve-form-item>
              <ve-form-item label="保额" unit="元">
                <ve-input-number :min="0" :max="99999999.99" :precision="2" placeholder="请输入" v-model="item.insuredSum" />
              </ve-form-item>
              <ve-form-item label="保险费" unit="元" :borderBottom="false">
                <ve-input-number :min="0" :max="99999999.99" :precision="2" placeholder="请输入" v-model="item.insureAmt" />
              </ve-form-item>
            </view>
          </view>
          <view
            class="ve-form-item-btn"
            :class="[info.carInsureDetail.length ? 've-form-item-btn-have-data' : '']"
            @click="handleInsureAdd"
          >
            <ve-icon name="plus" size="30"></ve-icon>
            <span class="ve-form-item-btn-text">新增险种</span>
          </view>
        </view>
        <ve-form-item label="上传保险单" :borderBottom="false">
          <UploadFile v-model:fileId="info!.policyImgFileId" :fileTypes="fileTypes" :fileIndex="3" @change="uploadChangefile" />
        </ve-form-item>
        <view class="btn-box" v-if="listLength > 1">
          <view class="ve-form-item-btn error" @click="handleDelete">
            <text class="iconfont ve-icon-add_btn" style="color: rgba(254, 97, 90, 1); font-size: 36rpx"></text>
            <span class="ve-form-item-btn-text">删除此保险单</span>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ref, onMounted, inject } from 'vue'
  import UploadFile from '@/components/upload-file/index.vue'
  import { useSysDict } from '@/hooks/useDict'

  const sysDict = useSysDict(['insure_business_kind_type'])

  const props = defineProps({
    listLength: {
      type: Number,
      default: 0,
    },
    itemIndex: {
      type: Number,
      default: 0,
    },
    info: {
      type: Object,
      default: () => {},
    },
  })

  const form = inject<any>('form')

  onMounted(() => {
    console.log('🐳 log：', props.info)
  })

  const fileTypes = ref<any>(['pdf', 'jpg'])
  const emits = defineEmits(['delete', 'uploadChange'])

  const remoteSelectData = {
    prop: 'insureCompany',
    label: '',
    type: 'remote-select',
    attrs: {
      type: 'supplierInsure',
    },
  }

  const timeRangeConfirmFn = (value: any) => {
    form.business[props.itemIndex].times = value[0] && value[1] ? value : []
  }

  const handleRemoteSelectChange = (val: number, option: any) => {
    console.log('🐳 log：', val, option)
    props.info!.insureCompany = val
    remoteSelectData.label = option.supplierName
  }

  const handleDelete = () => {
    emits('delete', props.itemIndex)
    // props.info[props.index]!.carInsureDetail.splice(index, 1)
  }

  const handleInsureAdd = () => {
    props.info!.carInsureDetail.push({
      insureKindType: '',
      insuredSum: '',
      insureAmt: '',
    })
  }

  const handleInsureDelete = (index: number) => {
    props.info!.carInsureDetail.splice(index, 1)
  }

  const uploadChangefile = (fileList: any) => {
    emits('uploadChange', fileList)
  }
</script>

<style lang="scss" scoped>
  .insure-info-header {
    font-size: 30rpx;
    font-weight: 400;
    color: #191c27;
    margin-top: 32rpx;
    margin-bottom: 16rpx;
  }
  .ve-form-item-disabled {
    background: #f6f8f9;
    padding-left: 32rpx;
    padding-right: 32rpx;
    color: #9ea5bb;
    .ve-form-item__body__right__content__unit {
      color: #9ea5bb;
    }

    &.leftLayout {
      .ve-form-item__body__right__content__slot {
        text-align: right;
      }
    }
  }

  .btn-box {
    padding: 32rpx 0;
    border-top: 1px solid rgba(216, 216, 216, 0.3);
  }
  .ve-form-item-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 88rpx;
    background: #f3f7ff;
    color: #3072f6;
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    border: 2rpx solid #3072f6;

    &.error {
      color: rgba(254, 97, 90, 1);
      border: 2rpx solid rgba(254, 97, 90, 1);
      background-color: transparent;
    }
    .ve-form-item-btn-text {
      font-size: 30rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      margin-left: 18rpx;
    }
  }
  .ve-form-item-btn-have-data {
    margin-top: 32rpx;
  }
  .form-fee-content,
  .insure-info-box {
    width: 100%;
    background: #f7f8fa;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    opacity: 1;
    margin-bottom: 32rpx;
    &:last-child {
      margin-bottom: 0;
    }
    .form-fee-content-title,
    .insure-info-title {
      height: 88rpx;
      box-sizing: border-box;
      padding: 0 24rpx 0 24rpx;
      background: #f0f1f3;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .form-fee-content-title-text,
    .insure-info-title-text {
      font-size: 30rpx;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #191c27;
    }
    .form-fee-content-content {
      box-sizing: border-box;
      padding: 0 24rpx 0 24rpx;
    }
  }

  .insure-info-box {
    .insure-kind-type-box {
      padding: 0 24rpx;
    }
  }
</style>
